<template lang="jade">
    div
        table(class="table table-striped table-bordered",v-if="skuList.length >0")
            colgroup
                col(width="45px",align="center",v-if="!canEdit")
                col(v-for="propertyName in propertyNames")
                col(width="60px",align="center")
                col(width="100px",align="center")
                col(width="60px",align="center")
            thead
                tr
                    th(v-if="showCheckbox",style="text-align:center")
                        el-checkbox(@change="all")
                    th(v-for="propertyName in propertyNames") {{propertyName}}
                    th(v-if="showTotal") 库存
            tbody
                tr(v-for="(sku,index) in skuList")
                    td(v-if="showCheckbox",style="text-align:center")
                        el-checkbox(v-model="sku.checked",@change="checkedChange(sku,index)")
                    td(v-for="skuItem in sku.skuPropertyItems") {{skuItem.name}}
                    td(v-if="showTotal") {{sku.total}}
        div(v-else,style="padding:10px;text-align:center;") 没有sku
            
</template>
<script>
    import _ from 'lodash';
    import Collection  from 'collection';

    export default {
        data() {
            return {
                skuList:[],
                propertyNames:[],
                skuListProxy: new Collection.Collection,
            }
        },

        props:{
            skuList: {type:[],default:[]},
            canEdit: {type:Boolean, default: false},
            showCheckbox:{type:Boolean, default: false},
            showTotal:{type:Boolean, default: false},
        },

        model:{
            prop: 'skuList',
            event: 'update'
        },

        watch:{
            'skuList.length'(){
                this.get_property_names();
            }
        },

        methods: {
            get_property_names(){
                var vm  = this;
                vm.propertyNames = [];
                if(this.skuList.length ===0) return;
                
                var items = this.skuList[0].skuPropertyItems
                _.each(items, function(item){
                    if(!item.property) return;
                    vm.propertyNames.push(item.property.name);
                });
            },

            checkedChange(sku,index){
                this.$emit('update', this.skuList);
                var checkedItems = _.filter(this.skuList, function(item){return item.checked});
                this.$emit('change', checkedItems);
            },

            all(checked){
                 _.each(this.skuList, function(item){item.checked = checked});
                this.checkedChange();
            }
        },
        created(){
            this.get_property_names();
        }
    }
</script>